<template>
  <div class="yingmoo-yminformation">
    <div class="information">
      <ul>
        <li>消息中心</li>
        <li @click="shos=1,shod=0" :style='{"background-color": shos==1? "#dfeffc":""}'><img src="../assets/ym-member/information/diling.png" />系统通知</li>
        <li @click="shod=1,shos=0" :style='{"background-color": shod==1? "#dfeffc":""}'><img src="../assets/ym-member/information/mess.png" />订单提醒</li>
      </ul>
      <div class="information-right">
        <div class="right" v-show="shos==1">
          <div class="the-first"><img src="../assets/ym-member/information/action.png" />系统通知</div>
          <div class="messages">
            <div class="time">2017-12-14 15:30:20</div>
            <div class="title-box">
              <p class="title">店铺审核未通过<span><img src="../assets/ym-member/information/dele.png" /></span></p>
              <p class="content">您申请的店铺未通过审核，请到会员中心完善您的资料（具体是什么证件未通过，在消息在描述出来）。</p>
            </div>
            <div class="time">2017-12-14 15:30:20</div>
            <div class="title-box">
              <p class="title">店铺审核通过<span><img src="../assets/ym-member/information/dele.png" /></span></p>
              <p class="content">您申请的店铺已通过审核，请到店铺管理中上传您的媒体吧。</p>
            </div>
            <div class="time">2017-12-14 15:30:20</div>
            <div class="title-box">
              <p class="title">店铺审核未通过<span><img src="../assets/ym-member/information/dele.png" /></span></p>
              <p class="content">您申请的店铺未通过审核，请到会员中心完善您的资料（具体是什么证件未通过，在消息在描述出来）。</p>
            </div>
          </div>
          <div class="btn">查看更多消息</div>
        </div>
        <div class="right" v-show="shod==1">
          <div class="the-first"><img src="../assets/ym-member/information/action.png" />订单提醒</div>
          <div class="messages">
            <div class="time">2017-12-14 15:30:20</div>
            <div class="title-box">
              <p class="title">订单审核未通过<span><img src="../assets/ym-member/information/dele.png" /></span></p>
              <p class="content">您申请的订单未通过审核，请到会员中心完善您的资料（具体是什么证件未通过，在消息在描述出来）。</p>
            </div>
            <div class="time">2017-12-14 15:30:20</div>
            <div class="title-box">
              <p class="title">订单审核通过<span><img src="../assets/ym-member/information/dele.png" /></span></p>
              <p class="content">您申请的订单已通过审核，请到店铺管理中上传您的媒体吧。</p>
            </div>
            <div class="time">2017-12-14 15:30:20</div>
            <div class="title-box">
              <p class="title">订单审核未通过<span><img src="../assets/ym-member/information/dele.png" /></span></p>
              <p class="content">您申请的订单未通过审核，请到会员中心完善您的资料（具体是什么证件未通过，在消息在描述出来）。</p>
            </div>
          </div>
          <div class="btn">查看更多消息</div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
  export default {
    name: "yingmoo-information",
    data() {
      return {
        shos: 1,
        shod: 0
      }
    },
    mounted() {

    },
    methods: {
      
    }
  }

</script>

<style scoped lang="less">
  .yingmoo-yminformation {
    .information {
      width: 1200px;
      height: 710px;
      margin: 0 auto;
      margin-top: 20px;
      display: flex;
      background-color: white;
      padding-top: 30px;
      ul {
        margin-left: 40px;
        li {
          width: 110px;
          height: 40px;
          font-size: 16px;
          line-height: 40px;
          text-align: center;
          background-color: #f3f9ff;
          &:nth-child(1) {
            background-color: #036eb7;
            color: white;
          }
          &:nth-child(2) {
            color: #2b2b2b;
            cursor: pointer;
            img{
              position: relative;
              top: 5px;
              margin-right: 5px;
            }
            &:hover {
              background-color: #dfeffc;
            }
          }
          &:nth-child(3) {
            color: #2b2b2b;
            cursor: pointer;
            img{
              position: relative;
              top: 5px;
              margin-right: 5px;
            }
            &:hover {
              background-color: #dfeffc;
            }
          }
        }
      }
      .information-right {
        width: 905px;
        margin-left: 30px;
        .right {
          .the-first {
            width: 905px;
            height: 55px;
            border: 1px solid #ffd679;
            line-height: 55px;
            text-align: center;
            background-color: #fffcf1;
            color: #2b2b2b;
            img {
              position: relative;
              top: 5px;
              margin-right: 20px;
            }
          }
          .messages {
            .time {
              line-height: 50px;
              color: #505050;
              font-size: 12px;
              text-align: center;
            }
            .title-box {
              height: 115px;
              background-color: #f4f4f4;
              padding: 0px 14px;
              color: #505050;
              font-size: 14px;
              .title {
                line-height: 50px;
                border-bottom: 1px solid #c1c1c1;
                span {
                  float: right;
                  margin-right: 14px;
                }
              }
              .content {
                line-height: 65px;

              }
            }
          }
          .btn {
            width: 120px;
            line-height: 25px;
            background-color: #036eb7;
            color: white;
            text-align: center;
            margin: 0 auto;
            margin-top: 30px;
            cursor: pointer;
            &:hover {
              background-color: #f29600;
            }
          }
        }

      }
    }
  }

</style>
